<template>
     <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <div class="app-container">
      <div class="filter-container">
     
        <div class="filter-item">
          <span class="span">数据源名称:</span>
          <el-select v-model="listQuery.sourceId"  placeholder="请选择所属数据源名称" style="width: 200px" @change="choseBelongs">
            <el-option v-for="item, index in sourceData" :key="index" :label="item.sourceName" :value="item.id" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="span">表名称:</span>
          <el-select v-model="tableName"  placeholder="请先选择数据源" style="width: 200px" :disabled="!listQuery.sourceId">
            <el-option v-for="item, index in tableList" :key="index" :label="item.tableName" :value="item.tableName" />
          </el-select>
          <!-- <el-input v-model="tableName" placeholder="请选择表名称" style="width: 200px" /> -->
        </div>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          {{ $t('table.search') }}
        </el-button>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleFilter">
         编辑
        </el-button>
        <el-button v-waves class="filter-item"  icon="el-icon-refresh" @click="handleClear">
          {{ $t('table.rest') }}
        </el-button>
      </div>
  
  
  
      <import ref="import" template-url="/consanguinity/template" import-url="/consanguinity/import"
        @refreshList="getList" />
      <consanguinity-form ref="form" @refreshList="getList" />
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes="pageArray" @pagination="getList" />
      <!-- <sankey :data='data' v-if="sankeyshow" /> -->
      <!-- <blod ref="blodCharts" /> -->
  
    
    </div>
</el-dialog>
  </template>
  
  <script>
  import { deleteconsanguinity, fetchconsanguinityList, exportconsanguinity } from '@/api/demo/consanguinity'
  import sankey from '@/components/Charts/sankey'
  import blod from '@/components/Charts/blod'
  import Import from '@/components/Import/import'
  import echrts from 'echarts'
  import waves from '@/directive/waves' // waves directive
  import permission from '@/directive/permission/permission'
  import consanguinityForm from './consanguinityForm'
  import Pagination from '@/components/Pagination'
  import Sortable from 'sortablejs'
  
  import { getSourceList } from '@/api/demo/metadataSource'
  import { getTableList } from '@/api/masterdata/masterdataTable'
  
  export default {
    name: 'consanguinityList',
    components: { consanguinityForm, Pagination, Import, sankey, blod },
    directives: { waves, permission },
    data() {
      return {
        dialogFormVisible:false,
        tableKey: 0,
        list: null,
        total: 0,
        sankeylist: [],
        sankeydatalist: [],
        sankeyshow: false,
        multipleSelection: [],
        downloadLoading: false,
        listLoading: true,
        pageArray: this.$store.getters.pageArray,
        listQuery: {
          sonTablename: undefined,
          pTablename: undefined,
          tableName: undefined,
          sourceId: undefined,
          sourceName: undefined,
          targetSourceid: undefined,
          targetSourcename: undefined,
          page: 1,
          limit: 999,
        },
        temp:{},
        tableData: [],
        sourceData: [],
        data: { nodes: [], links: [] },
        tableList:[],
        tableName:''//表名
      }
    },
    computed: {
      
      ids() {
        const ids = []
        this.multipleSelection.forEach((ele) => {
          ids.push(ele.id)
        })
        return ids.join(',')
      },
    },
    created() {
      // this.getTable()
      this.getSource()
    },
    mounted() {
      this.getList()
    },
    methods: {
        open(){
          this.dialogFormVisible=true
        },
       //选择所属数据源
       choseBelongs(id) {
   
        this.tableName=''
        this.$refs.blodCharts.seach('',id)
        this.listQuery.sourceId=id
        getTableList(this.listQuery).then(res=>{
          console.log(res,'tables')
          if(res.data.code==200){
            this.tableList=res.data.data
          }
        })
      }
      ,
      getSource() {
        getSourceList().then((res) => {
          if (res.data.code === 200) {
            this.sourceData = res.data.data
          }
        })
      },
      getList() {
        this.listLoading = true
        this.sankeyshow = false
      },
      handleCreate() {
        this.$refs.form.handleCreate()
      },
      handleUpdate(row) {
        this.$refs.form.handleUpdate(row.id)
      },
      handleDelete(row) {
        this.$confirm('确定删除该数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteconsanguinity(row.id).then((response) => {
            if (response.data.code === 0) {
              this.getList()
              this.$message.success(response.data.msg)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleBathDelete() {
        if (this.ids === '') {
          this.$message.warning('请选择至少一条数据')
          return
        }
        this.$confirm('确定删除所选数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteconsanguinity(this.ids).then((response) => {
            if (response.data.code === 0) {
              this.getList()
              this.$message.success(response.data.msg)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      handleImport() {
        this.$refs.import.show()
      },
      handleExport() {
        this.downloadLoading = true
        exportconsanguinity(this.listQuery).then((response) => {
          this.downloadLoading = true
          if (response.data.code === 0) {
            import('@/vendor/Export2Excel').then((excel) => {
              excel.export_byte_to_excel(response.data.data.bytes, response.data.data.title)
              this.downloadLoading = false
            })
          } else {
            this.$message.error(response.data.msg)
          }
        })
      },
      setSort() {
        const el = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          setData: function (dataTransfer) {
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
            dataTransfer.setData('Text', '')
          },
          onEnd: (evt) => {
            const targetRow = this.list.splice(evt.oldIndex, 1)[0]
            this.list.splice(evt.newIndex, 0, targetRow)
            // TODO：这里完成自己的业务处理
          },
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        // this.getList()
       this.$refs.blodCharts.seach(this.tableName,this.listQuery.sourceId)
      },
      handleClear(){
        this.listQuery.sourceId=''
        this.tableName=''
        this.$refs.blodCharts.seach(this.tableName,this.listQuery.sourceId)
      }
    },
  }
  </script>
  <style>
  .table-expand {
    font-size: 0;
  }
  
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  
  .span {
    color: #606266;
    font-weight: 700;
    font-size: 14px;
  }</style>
  